<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>农产品信息管理 - 哈尔滨双城区农产品物流园区管理系统</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/datatables/1.10.21/css/dataTables.bootstrap4.min.css">
    <link rel="stylesheet" th:href="@{/css/style.css}">
    <style>
        .product-img-preview {
            max-width: 100px;
            max-height: 100px;
            object-fit: cover;
        }
        .category-badge {
            display: inline-block;
            padding: 0.25em 0.6em;
            font-size: 75%;
            font-weight: 700;
            line-height: 1;
            text-align: center;
            white-space: nowrap;
            vertical-align: baseline;
            border-radius: 0.25rem;
        }
        .category-1 { background-color: #ffc107; color: #212529; }
        .category-2 { background-color: #28a745; color: #fff; }
        .category-3 { background-color: #fd7e14; color: #fff; }
        .category-4 { background-color: #dc3545; color: #fff; }
        .category-5 { background-color: #17a2b8; color: #fff; }
        .category-6 { background-color: #6c757d; color: #fff; }
    </style>
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <main role="main" class="col-md-12 ml-sm-auto px-4">
                <!-- 页面标题 -->
                <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
                    <h1 class="h2">农产品信息管理</h1>
                    <div class="btn-toolbar mb-2 mb-md-0">
                        <button type="button" class="btn btn-sm btn-primary mr-2" id="btnAdd">
                            <i class="fas fa-plus"></i> 新增农产品
                        </button>
                        <button type="button" class="btn btn-sm btn-outline-secondary" id="btnExport">
                            <i class="fas fa-download"></i> 导出
                        </button>
                    </div>
                </div>

                <!-- 搜索表单 -->
                <div class="card mb-4">
                    <div class="card-header">
                        <i class="fas fa-search"></i> 搜索条件
                    </div>
                    <div class="card-body">
                        <form id="searchForm">
                            <div class="row">
                                <div class="col-md-3 mb-3">
                                    <label for="productCode">农产品编号</label>
                                    <input type="text" class="form-control" id="productCode" name="productCode">
                                </div>
                                <div class="col-md-3 mb-3">
                                    <label for="productName">农产品名称</label>
                                    <input type="text" class="form-control" id="productName" name="productName">
                                </div>
                                <div class="col-md-3 mb-3">
                                    <label for="category">农产品类别</label>
                                    <select class="form-control" id="category" name="category">
                                        <option value="">全部</option>
                                        <option value="1">粮食</option>
                                        <option value="2">蔬菜</option>
                                        <option value="3">水果</option>
                                        <option value="4">肉禽蛋</option>
                                        <option value="5">水产</option>
                                        <option value="6">其他</option>
                                    </select>
                                </div>
                                <div class="col-md-3 mb-3">
                                    <label for="origin">产地</label>
                                    <input type="text" class="form-control" id="origin" name="origin">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-3 mb-3">
                                    <label for="producer">生产商/农户</label>
                                    <input type="text" class="form-control" id="producer" name="producer">
                                </div>
                                <div class="col-md-3 mb-3">
                                    <label for="status">状态</label>
                                    <select class="form-control" id="status" name="status">
                                        <option value="">全部</option>
                                        <option value="0">正常</option>
                                        <option value="1">停用</option>
                                    </select>
                                </div>
                                <div class="col-md-6 mb-3 d-flex align-items-end">
                                    <button type="button" class="btn btn-primary mr-2" id="btnSearch">
                                        <i class="fas fa-search"></i> 搜索
                                    </button>
                                    <button type="button" class="btn btn-secondary" id="btnReset">
                                        <i class="fas fa-redo"></i> 重置
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

                <!-- 数据表格 -->
                <div class="card mb-4">
                    <div class="card-header">
                        <i class="fas fa-table"></i> 农产品信息列表
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>农产品编号</th>
                                        <th>农产品名称</th>
                                        <th>类别</th>
                                        <th>产地</th>
                                        <th>生产商/农户</th>
                                        <th>价格</th>
                                        <th>单位</th>
                                        <th>认证信息</th>
                                        <th>状态</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <!-- 数据将通过AJAX加载 -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </div>

    <!-- 新增/编辑农产品模态框 -->
    <div class="modal fade" id="productModal" tabindex="-1" role="dialog" aria-labelledby="productModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="productModalLabel">新增农产品信息</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="productForm">
                        <input type="hidden" id="agriProductId" name="agriProductId">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="modalProductCode">农产品编号</label>
                                <input type="text" class="form-control" id="modalProductCode" name="productCode" placeholder="自动生成">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="modalProductName">农产品名称 <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="modalProductName" name="productName" required>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="modalCategory">农产品类别 <span class="text-danger">*</span></label>
                                <select class="form-control" id="modalCategory" name="category" required>
                                    <option value="">请选择</option>
                                    <option value="1">粮食</option>
                                    <option value="2">蔬菜</option>
                                    <option value="3">水果</option>
                                    <option value="4">肉禽蛋</option>
                                    <option value="5">水产</option>
                                    <option value="6">其他</option>
                                </select>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="modalOrigin">产地 <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="modalOrigin" name="origin" required>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="modalProducer">生产商/农户 <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="modalProducer" name="producer" required>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="modalProduceDate">生产日期</label>
                                <input type="date" class="form-control" id="modalProduceDate" name="produceDate">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-4 mb-3">
                                <label for="modalPrice">价格 <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <input type="number" class="form-control" id="modalPrice" name="price" step="0.01" min="0" required>
                                    <div class="input-group-append">
                                        <span class="input-group-text">元</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4 mb-3">
                                <label for="modalUnit">单位 <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="modalUnit" name="unit" required>
                            </div>
                            <div class="col-md-4 mb-3">
                                <label for="modalSpecification">规格</label>
                                <input type="text" class="form-control" id="modalSpecification" name="specification">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-4 mb-3">
                                <label for="modalShelfLife">保质期(天)</label>
                                <input type="number" class="form-control" id="modalShelfLife" name="shelfLife" min="0">
                            </div>
                            <div class="col-md-4 mb-3">
                                <label for="modalStorageCondition">储存条件</label>
                                <input type="text" class="form-control" id="modalStorageCondition" name="storageCondition">
                            </div>
                            <div class="col-md-4 mb-3">
                                <label for="modalCertification">认证信息</label>
                                <input type="text" class="form-control" id="modalCertification" name="certification" placeholder="无公害、绿色、有机等">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="modalImageUrl">农产品图片</label>
                                <div class="custom-file">
                                    <input type="file" class="custom-file-input" id="modalImageFile" accept="image/*">
                                    <label class="custom-file-label" for="modalImageFile">选择文件</label>
                                </div>
                                <input type="hidden" id="modalImageUrl" name="imageUrl">
                                <div class="mt-2" id="imagePreviewContainer" style="display: none;">
                                    <img id="imagePreview" class="img-thumbnail product-img-preview">
                                </div>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="modalStatus">状态</label>
                                <select class="form-control" id="modalStatus" name="status">
                                    <option value="0">正常</option>
                                    <option value="1">停用</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="modalDescription">农产品描述</label>
                            <textarea class="form-control" id="modalDescription" name="description" rows="3"></textarea>
                        </div>
                        <div class="form-group">
                            <label for="modalRemark">备注</label>
                            <textarea class="form-control" id="modalRemark" name="remark" rows="2"></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="btnSave">保存</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 查看农产品详情模态框 -->
    <div class="modal fade" id="viewProductModal" tabindex="-1" role="dialog" aria-labelledby="viewProductModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="viewProductModalLabel">农产品详情</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div id="viewImageContainer" class="text-center mb-3">
                                <img id="viewImage" class="img-fluid" style="max-height: 200px;" src="" alt="农产品图片">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <h4 id="viewProductName"></h4>
                            <p><span id="viewCategory" class="category-badge"></span></p>
                            <p class="text-danger font-weight-bold">¥<span id="viewPrice"></span>/<span id="viewUnit"></span></p>
                            <p><strong>规格：</strong><span id="viewSpecification"></span></p>
                            <p><strong>认证信息：</strong><span id="viewCertification"></span></p>
                        </div>
                    </div>
                    <hr>
                    <div class="row">
                        <div class="col-md-6">
                            <p><strong>农产品编号：</strong><span id="viewProductCode"></span></p>
                            <p><strong>产地：</strong><span id="viewOrigin"></span></p>
                            <p><strong>生产商/农户：</strong><span id="viewProducer"></span></p>
                            <p><strong>生产日期：</strong><span id="viewProduceDate"></span></p>
                        </div>
                        <div class="col-md-6">
                            <p><strong>保质期：</strong><span id="viewShelfLife"></span>天</p>
                            <p><strong>储存条件：</strong><span id="viewStorageCondition"></span></p>
                            <p><strong>状态：</strong><span id="viewStatus"></span></p>
                            <p><strong>创建时间：</strong><span id="viewCreateTime"></span></p>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <p><strong>农产品描述：</strong></p>
                            <p id="viewDescription" class="text-muted"></p>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <p><strong>备注：</strong></p>
                            <p id="viewRemark" class="text-muted"></p>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 删除确认模态框 -->
    <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteModalLabel">确认删除</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>确定要删除该农产品信息吗？此操作不可恢复。</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-danger" id="btnConfirmDelete">确认删除</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/datatables/1.10.21/js/dataTables.bootstrap4.min.js"></script>
    <script th:src="@{/js/agriProduct.js}"></script>
</body>
</html> 